<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 进度条</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>


<div class="container">
    <h2>进度条</h2>
<!--     progress-striped active  -->
    <div class="progress  ">
        <div class="progress-bar "
             role="progressbar "
             aria-valuenow="70"
             aria-valuemin="0"
             aria-valuemax="100"
             style="width:70%"
        >   70%     </div>
    </div>
<!--
progress-bar-success
progress-bar-info
progress-bar-warning
progress-bar-danger

-->


<!--
    <div class="progress progress-striped active">
        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
             aria-valuemin="0" aria-valuemax="100" style="width:40%">
            40% Complete (success)
        </div>
    </div>

    <div class="progress progress-striped active">
        <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50"
             aria-valuemin="0" aria-valuemax="100" style="width:50%">
            50% Complete (info)
        </div>
    </div>

    <div class="progress progress-striped active">
        <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60"
             aria-valuemin="0" aria-valuemax="100" style="width:60%">
            60% Complete (warning)
        </div>
    </div>

    <div class="progress progress-striped active">
        <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70"
             aria-valuemin="0" aria-valuemax="100" style="width:70%">
            70% Complete (danger)
        </div>
    </div>
-->


</div>

</body>
</html>